'use client'

import React from 'react'
import clsx from 'clsx'

export default function Recommendation() {
  const data = {
    recommendation: 'Proceed To Diligence',
    rationale: 'Anchor utility deployment could unlock category leadership; security/execution risks remain.',
    confidence: 64,
    outcomes: [
      { color: '#22c55e', label: '$50–$100M Exit', percent: 30 },
      { color: '#2563eb', label: '$100–$500M Exit', percent: 45 },
      { color: '#6b7280', label: '$500M–$1B Exit', percent: 20 }
    ]
  }

  return (
    <div className="rec-card w-full bg-gradient-to-b from-[#0A0D14] to-[#0B1018] rounded-2xl border-solid border-[#1f2430] shadow-[0_0_30px_rgba(0,0,0,0.35)] p-[16px] text-[#e7ecf3]">
      {/* 标题 */}
      <h2 className="text-[#9fb7ff] text-sm font-semibold uppercase tracking-wider mb-4">Next Step Recommendation</h2>

      {/* Recommendation / Rationale */}
      <div className="grid md:grid-cols-2 gap-3 mb-5">
        {/* Recommendation */}
        <div className="flex flex-col justify-center bg-[#131822]/60 rounded-lg p-4 border-dashed border-[#2b3142]">
          <h3 className="text-[#8ea2c9] text-xs uppercase mb-1 font-semibold tracking-wider">Recommendation</h3>
          <div className="flex items-center gap-2 text-lg font-semibold">
            <span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
            <span>{data.recommendation}</span>
          </div>
        </div>

        {/* Rationale */}
        <div className="flex flex-col justify-center bg-[#131822]/60 rounded-lg p-4 border-dashed border-[#2b3142]">
          <h3 className="text-[#8ea2c9] text-xs uppercase mb-1 font-semibold tracking-wider">Rationale</h3>
          <p className="text-[#cfd6e6] text-sm leading-relaxed">{data.rationale}</p>
        </div>
      </div>

      {/* Confidence Bar */}
      <div className="mb-4">
        <h3 className="text-[#9fb7ff] text-xs uppercase tracking-wider mb-2 font-medium">
          Signal Strength of Recommendation
        </h3>
        <div className="w-full h-[12px] bg-[#0d1118] border-solid border-[#22c55e]/30 rounded-full overflow-hidden">
          <div
            className="h-full transition-all"
            style={{
              width: `${data.confidence}%`,
              background: '#22c55e'
            }}
          />
        </div>
      </div>

      {/* Outcome Profile */}
      <div>
        <h3 className="text-[#9fb7ff] text-xs uppercase tracking-wider mb-2 font-medium">Potential Outcome Profile</h3>
        <div className="flex flex-wrap gap-3">
          {data.outcomes.map((o, i) => (
            <div
              key={i}
              className={clsx(
                'flex items-center gap-2 px-4 py-2 rounded-full border-solid text-[15px] font-semibold transition-all',
                'bg-[#0f131c] border-[#3b82f6] shadow-[0_0_0_1px_rgba(59,130,246,0.85),inset_0_0_12px_rgba(59,130,246,0.25),0_0_14px_rgba(59,130,246,0.22)]'
              )}>
              <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: o.color }} />
              <span>{o.label}</span>
              <span className="ml-1 text-[#cfd6e6]">{o.percent}%</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
